<%var csstpl = {%>

    </style>
    <%};%>
        <%var jstpl = {%>
            <script>
                var app = new Vue({
                    el: "#content",
                    data: {
                        query: {
                            pageNumber: 1,
                            pageSize: 10,
                            name: ''
                        },
                        data_result: {},
                        level: '',
                        coupon: '',
                        type: '0',
                    },
                    created: function() {
                        this.loadPage("init");
                    },
                    mounted() {
                        let form = layui.form;
                        let that = this;
                        let laydate = layui.laydate;
                        laydate.render({
                            elem: '#outOfTime',
                            range: true,
                            type: 'datetime'
                        })
                        laydate.render({
                            elem: '#useTime',
                            range: true,
                            type: 'datetime'
                        })
                        form.on('select(selectused)', function(data) {
                            that.type = data.value;
                            that.coupon.used = data.value;
                            // that.$nextTick(function() {
                            //     form.render();
                            // })
                        });
                        form.on('select(selectProductId)', function(data) {
                            that.coupon.product_id = data.value;
                            // that.$nextTick(function() {
                            //     form.render();
                            // })
                        });

                        form.on('select(selectProductTypeId)', function(data) {
                            that.coupon.product_type_id = data.value;
                            // that.$nextTick(function() {
                            //     form.render();
                            // })
                        });

                        form.on('submit(couponSubmit)', function(data) {
                            Ajax("/system/coupon/save", data.field, function(res) {
                                if (res.state) {
                                    gx.alert(res.msg);
                                    that.loadPage;
                                    $("#couponModal").modal("hide");
                                } else {
                                    gx.alerts(res.msg);
                                }
                            })
                        });
                    },
                    methods: {
                        loadPage: function(model) { //载入模式有两种  init初始化载入 load分页载入
                            if (model == "init") {
                                this.query.pageNumber = 1;
                            }
                            Ajax("/system/coupon", this.query, function(d) {
                                app.data_result = d.list;
                                console.log(d);
                                if (d.firstPage == true) {
                                    layui.laypage.render({
                                        elem: 'gexin_page' //注意，这里的 test1 是 ID，不用加 # 号
                                            ,
                                        layout: ['count', 'prev', 'page', 'next',
                                            'limit', 'skip'
                                        ],
                                        count: d.totalRow //数据总数，从服务端得到
                                            ,
                                        limit: app.query.pageSize,
                                        jump: function(obj, first) {
                                            app.query.pageNumber = obj.curr;
                                            if (app.query.pageSize != obj.limit) {
                                                app.query.pageSize = obj.limit;
                                                app.loadPage("init");
                                                return;
                                            }
                                            if (!first) {
                                                app.loadPage("load");
                                            }
                                        }
                                    });
                                }
                            })
                        },
                        add: function() {
                            this.coupon = {};
                            $("#couponModal").modal("show");
                        },
                        edit: function(d) {
                            this.coupon = d;
                            console.log(this.coupon);
                            let form = layui.form;


                            this.coupon.outOfTime =  d.start_time + ' - ' + d.end_time
                            this.coupon.useTime =d.valid_start_time + ' - ' + d.valid_end_time
                            this.$nextTick(function() {
                                form.render();
                                $("#couponModal").modal("show");
                            })

                        }
                    }
                })
            </script>
            <%};%>
                <%layout("../layout/_layout_layui.html",{title:"优惠券管理",jstpl:jstpl,csstpl:csstpl}){%>
                    <div class="layui-row" id="content" v-cloak>

                        <!-- <div class="layui-col-md8">
                            <div class="layui-form-item">
                                <div class="layui-input-inline">
                                    <input type="text" name="admin.name" v-model="query.name" placeholder="输入城市名称模糊 查询" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                        </div>
-->
                        <div class="layui-col-md3">
                            <div class="layui-form-item">
                                <a @click="add()" class="layui-btn ">添加</a>
                            </div>
                        </div>
                        <!-- 内容开始 -->
                        <div class="layui-col-md12" style="margin-top: 20px">
                            <table class="layui-table ">
                                <thead>
                                    <tr>
                                        <th>优惠券标题</th>
                                        <th>优惠券类型</th>
                                        <th>满多少金额 </th>
                                        <th>用券金额 </th>
                                        <th>配额：发券数量 </th>
                                        <th>已领取的优惠券数量</th>
                                        <th>已使用的优惠券数量</th>
                                        <th>发放开始时间 </th>
                                        <th>发放结束时间 </th>
                                        <th>使用开始时间 </th>
                                        <th>使用结束时间 </th>
                                        <th>自领取之日起有效天数</th>
                                        <th>需要多少积分</th>
                                        <th>状态</th>
                                        <th>创建时间 </th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody v-for="d in data_result">

                                    <td>{{d.title }}</td>
                                    <td>{{d.used==10?"店铺优惠券":d.used==11?"新人店铺券":d.used==20?"商品优惠券 ":d.used==30?"类目优惠券":d.used==60?"平台优惠券":d.used==61?"新人平台券":""}}</td>
                                    <!-- 1满减券 2叠加满减券 3无门槛券（需要限制大小） -->
                                    <td>{{d.with_amount }}</td>
                                    <td>{{d.used_amount }}</td>
                                    <td>{{d.quota }}</td>
                                    <td>{{d.take_count }}</td>
                                    <td>{{d.used_count }}</td>
                                    <td>{{d.start_time }}</td>
                                    <td>{{d.end_time }}</td>
                                    <td>{{d.valid_start_time }}</td>
                                    <td>{{d.valid_end_time }}</td>
                                    <td>{{d.valid_days }}</td>
                                    <td>{{d.integral}}</td>
                                    <td>{{d.status==1?"生效":d.status==2?"失效":d.status==3?"已结束":""}}</td>
                                    <td>{{d.create_time }}</td>
                                    <td>
                                        <a class="layui-btn layui-btn-sm" @click="edit(d)">修改</a>
                                    </td>
                                </tbody>
                                <tbody id="tbody_body" v-if="data_result.length==0">
                                    <tr>
                                        <td colspan="19" style="text-align:center;height:300px">
                                            <h1>没有数据</h1>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <fieldset id="gexin_page" class="layui-elem-field layui-field-title"></fieldset>
                        </div>





                        <!-- 创建优惠券 -->
                        <div class="modal fade" id="couponModal" tabindex="-1" role="dialog" aria-hidden="true">
                            <form id="auditForm" class="layui-form form-horizontal ">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h4 class="modal-title">
                                                创建/更新优惠券
                                            </h4>
                                        </div>
                                        <div class="modal-body">
                                            <!-- 弹出框开始  -->
                                            <div class="layui-row layui-col-space15">
                                                <!-- 弹出框开始  -->
                                                <input type="hidden" id="coupon.id" v-model="coupon.id" name="coupon.id">
                                                <div class="layui-form-item">
                                                    <label class="layui-form-label">优惠券标题</label>
                                                    <div class="layui-input-block">
                                                        <input class="layui-input" type="text" lay-verify="required" v-model="coupon.title" name="coupon.title" />
                                                    </div>
                                                </div>

                                                <div class="layui-form-item">
                                                    <label class="layui-form-label">优惠劵类型</label>
                                                    <div class="layui-input-block">
                                                        <select v-model="coupon.used" name="coupon.used" lay-filter="selectused">
                                                                <option value=''> 请选择优惠劵使用范围</option>
                                                                <option value='10'> 店铺优惠券</option>
                                                                <option value='20'> 商品优惠券</option>
                                                                <option value='30'> 类目优惠券</option>
                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="layui-form-item" v-show="type==20">
                                                    <label class="layui-form-label">商品优惠券</label>
                                                    <div class="layui-input-block">
                                                        <select v-model="coupon.product_id" name="coupon.product_id" lay-filter="selectProductId">
                                                                <option value=''>请选择优惠商品</option>
                                                                <%for(product in products){%>
                                                                    <option value='${product.id}'>${product.id} ==== ${product.product_name}</option>
                                                                <%}%>
                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="layui-form-item" v-show="type==30">
                                                    <label class="layui-form-label">类目优惠券</label>
                                                    <div class="layui-input-block">
                                                        <select v-model="coupon.product_type_id" name="coupon.product_type_id" lay-filter="selectProductTypeId">
                                                                <option value=''>请选择优惠类目</option>
                                                                <%for(productType in productTypes){%>
                                                                    <option value='${productType.id}'> ${productType.type_name}</option>
                                                                <%}%>
                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="layui-form-item" v-show="type==10">
                                                    <label class="layui-form-label">优惠券使用类型</label>
                                                    <div class="layui-input-block">
                                                        <select v-model="coupon.type" name='coupon.type'>
                                                            <option value=''> 请选择满减类型</option>
                                                            <option value='1'> 满减券 </option>
                                                            <option value='2'> 叠加满减券</option>
                                                            <option value='3'> 无门槛券（需要限制大小）</option>
                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="layui-form-item" v-show="type==10">
                                                    <label class="layui-form-label">优惠券使用范围</label>
                                                    <div class="layui-input-block">
                                                        <select v-model="coupon.with_special" name='coupon.with_special'>
                                                            <option value=''> 请选择优惠券使用范围</option>
                                                            <option value='1'>可用于特价商品</option>
                                                            <option value='2'>叠加满减券</option>
                                                            <option value='3'>无门槛券（需要限制大小）</option>
                                                        </select>
                                                    </div>
                                                </div>




                                                <div class="layui-form-item">
                                                    <label class="layui-form-label">需要多少积分</label>
                                                    <div class="layui-input-block">
                                                        <input class="layui-input" type="text" lay-verify="required" v-model="coupon.integral" name="coupon.integral" />
                                                    </div>
                                                </div>


                                                <div class="layui-form-item">
                                                    <label class="layui-form-label">满多少可用</label>
                                                    <div class="layui-input-block">
                                                        <input class="layui-input" type="text" lay-verify="required" v-model="coupon.with_amount" name="coupon.with_amount" />
                                                    </div>
                                                </div>
                                                <div class="layui-form-item">
                                                    <label class="layui-form-label">用券金额</label>
                                                    <div class="layui-input-block">
                                                        <input class="layui-input" type="text" lay-verify="required" v-model="coupon.used_amount" name="coupon.used_amount" />
                                                    </div>
                                                </div>
                                                <div class="layui-form-item">
                                                    <label class="layui-form-label">配额</label>
                                                    <div class="layui-input-block">
                                                        <input class="layui-input" type="text" lay-verify="required" v-model="coupon.quota" name="coupon.quota" />
                                                    </div>
                                                </div>
                                                <div class="layui-form-item">
                                                    <label class="layui-form-label">发放时间</label>
                                                    <div class="layui-input-block">
                                                        <input class="layui-input" type="text" lay-verify="required" id='outOfTime' v-model="coupon.outOfTime" name="outOfTime" />
                                                    </div>
                                                </div>
                                                <div class="layui-form-item">
                                                    <label class="layui-form-label">使用时间</label>
                                                    <div class="layui-input-block">
                                                        <input class="layui-input" type="text" lay-verify="required" id='useTime' v-model="coupon.useTime" name="useTime" />
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                            <div class="layui-form-item">
                                                <div class="layui-input-block">
                                                    <button type="button" class="layui-btn" lay-submit lay-filter="couponSubmit">提交</button>
                                                    <button type="button" data-dismiss="modal" class="layui-btn layui-btn-primary">关闭</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>







                    </div>
                    <%}%>